<template>
	<view class="page">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :iconPath="iconPath" :scale="12" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<image v-if="!collectShow" class="imgCollect" src="../../static/yishoucang.png" mode="" @click="collect"></image>
		<image v-else class="imgCollect" src="../../static/shoucang.png" mode="" @click="collect"></image>
		
		
		<view class="mid">
			<button @click="goNav">去导航</button>
			<view class="checkSpot">
				<view class="check" @click="goFish(latitude,longitude)">查看附近钓点</view>
				<view class="check" @click="goo">我要挂载赚钱</view>
			</view>
			<view class="txts">
				申明：以上钓点为主播自行创建，平台暂无法核实其真实性和安全性，请谨慎辨别。导航需手机已安装高德、百度等地图软件
			</view>
		</view>
		
		<view class="spotinfo">
			<view class="">钓点电话：<text class="phone">15564412227</text></view>
			<view class="">水深：<text class="phone">0.5-10  </text></view>
			<view class="">杆长：<text class="phone">3 3.3 3.6 3.9 4.5 5.4</text></view>
			<view class="phone">钓点详情</view>
			<view class="">
				点详情内容展示：放鱼时间、数量、鱼种、规则、路况、能否直达钓位，什么时间段好钓等
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectShow:false,
				show:true,
				radio1: 0,//举报类型
				locat:'请选择钓点位置',
				spotName:'',
				keyword: '',//搜索框的输入值
				id:0, // 使用 marker点击事件 需要填写id
				idd:'',
				title: 'map',
				latitude: 30.66,
				longitude: 104.10,
				// iconPath: '/static/weizhi.png', 
				covers: [{
					id:1,
					title:'李家沱234234',
					latitude: 30.68,
					longitude: 104.10,
					// iconPath: '/static/weizhi.png',
					label:'你好'
				}, {
					id:2,
					title:'钩钩果',
					latitude: 30.68,
					longitude: 104.08,
					// iconPath: '/static/weizhi.png',
					label:'你好',
					// width:20,
					// height:24,
				}],
				address:'',//钓点地址
				name:'',//钓点名称
			}
			
		},
		onLoad(opt) {
			let obj = JSON.parse(decodeURIComponent(opt.obj))
			console.log('是否收藏111',obj)
			if(obj.shifoushouchang == 1){
				this.collectShow = true
				console.log('是否收藏111',this.collectShow)
			}
			this.latitude = Number(obj.latitude)
			this.longitude = Number(obj.longitude)
			this.address = obj.address
			this.name = obj.name
			console.log('opt333',obj)
			
			// this.show = true
		},
		methods:{
			// 导航
			goNav(){
				let that = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
						    latitude: parseFloat(that.latitude),
						    longitude: parseFloat(that.longitude),
						    name: that.name,
						    address: that.address,
						    success: function (res) {
						        console.log('打开系统位置地图成功')
						    },
						    fail: function (error) {
						        console.log(error)
						    }
						})
					}
				});

			},
			goFish(){//去钓点地图
				uni.navigateTo({
					url:"/pages/index/map?lat=" + this.latitude + "&lon=" + this.longitude
				})
			},
			goo(){
				uni.navigateTo({
					url:"/pages/index/spotPosition"
				})
			},
			
			report(){
				uni.navigateTo({
					url:"/pages/newPages/report"
				})
			},
			back(){
				this.show = false
			},
			collect(){
				// this.$api.post("diaodian/collect",{id:})
				
				this.$api.post('my/collect', { id: this.idd }).then((res) => {
					uni.showToast({
						title:res.msg,
						duration:1000,
					})
				});
					this.collectShow = !this.collectShow
				// if(!this.collectShow){
				// 	uni.showToast({
				// 		title:'取消收藏',
				// 		icon:'fail',
				// 		duration:1000,
				// 	})
				// 	this.collectShow = !this.collectShow
				// }else{
				// 	uni.showToast({
				// 		title:'已收藏',
				// 		icon:'success',
				// 		duration:1000,
				// 	})
				// 	this.collectShow = !this.collectShow
				// }
				console.log('click 收藏',this.collectShow)
			}
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #f5f5f5;
	}
	.spotinfo{
		font-weight: 500;
		font-size: 27rpx;
		color: #999999;
		line-height: 32rpx;
		margin: 20rpx 27rpx;
		background-color: #FFFFFF;
		padding: 27rpx;
		border-radius: 20rpx;
		>view{
			margin: 20rpx 0;
		}
		.phone{
			color:#333333;
		}
	}
	.mid{
		padding: 27rpx;
		background-color: #FFFFFF;
	}
	.checkSpot{
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.check{
		width: 333rpx;
		height: 87rpx;
		border-radius: 13rpx;
		border: 1px solid #3681F3;
		font-weight: 500;
		font-size: 29rpx;
		color: #3681F3;
		line-height: 87rpx;
		text-align: center;
	}
	.txts{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 32rpx;
		margin-top: 20rpx;
	}
	.fishSpot{
		display: flex;
		justify-content: space-around;
		width: 700rpx;
		height: 107rpx;
		// background: #F5F5F5;
		margin: 0 27rpx;
		background: #000000;
		border-radius: 20rpx;
		opacity: 0.7;
		font-weight: 500;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 107rpx;
		position: fixed;
		bottom: 100rpx;
	}
	.imgBack{
		width: 21rpx;
		height: 21rpx;
		margin-top: 43rpx;
	}
	.add{
		width: 107rpx;
		height: 53rpx;
		background: #3681F3;
		border-radius: 13rpx;
		text-align: center;
		line-height: 53rpx;
		margin-top: 30rpx;
	}
	.fish{
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin: 37rpx 27rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 27rpx;
	}
	.image{
		width: 47rpx;
		height: 47rpx;
	}
	.txt{
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		line-height: 32rpx;
	}
	.imgCollect{
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		top: 400rpx;
		right: 50rpx;
	}
		button{
			height: 87rpx;
			line-height: 87rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin: 40rpx 0rpx 0;
			background: #3681F3;
			border-radius: 13rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
		}
</style>
